<!doctype html>
<html>
<head>
	<title>爱旅网，去你想去的地方</title>
	<meta charset="utf-8"> 
	<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
	<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="Public/js/yidongduan.js"></script>
	<link rel="stylesheet" href="Public/swiper/dist/css/swiper.min.css">
	<style type="text/css">
		.header{width:100%;height:0.9rem;background: #2DBB57;font-size: 0.9rem;}
		.header_c{float:left;list-style: none;height: 0.9rem;line-height: 0.9rem;font-size: 0.3rem;}
		.header_c span{line-height: 0.9rem;display: inline-block;;}
		.logodiv{width:25%;height:0.9rem;}
		.navigatediv{width:25%;height:0.9rem;float:right;}
		.logoimg{background-image: url('Public/Img/logo.png');width:45%;height:0.9rem;float:left;background-position: 0.09rem 0.1rem;background-size: 80px 30px;background-repeat:no-repeat;}
		.addressdiv{font-size: 0.25rem;color: #fff;width: 55%;height:0.9rem;line-height: 0.9rem;float:right;}
		.search_input{width:3.5rem;height:0.6rem;border-radius: 0.1rem;}
		.navigatedivspan{font-size: 0.3rem;color:#fff;height:0.9rem;width:60%;float:right;}
		.itempic{text-align: center;}





		/******swiper******/
		 html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 2.5rem;
        margin-left: auto;
        margin-right: auto;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        width:100%;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
		/******swiper******/


		.menu_panel_mobel{width:100%;height:4rem;background: #2DBB57;border-bottom: .1rem solid #fff;}
		.menupanel_first{width:100%;height:1rem;font-size: 0.3rem;color:#fff;text-align: center;line-height: 1rem;border-bottom: .05rem solid #fff;}
		.menupanel{width:33.3333%;height:1rem;float:left;font-size: 0.3rem;text-align: center;line-height: 1rem;border-right:.05rem solid #fff;border-bottom: .05rem solid #fff;box-sizing:border-box;}
		.menupanelw{color:#fff;}
		.addressshow{width:100%;background: #fff;}
		.addressintro{width:100%;height:70px;font-size: .36rem;color:#000;text-align: center;line-height: .8rem;}
		.accresscon{width:100%;height:.5rem;display: block;border:.1rem solid #000;background: #fff;position:absolute;left: 0;right:0;}
		.addressbtn{float:left;width:33.33333%;height:.5rem;font-size: 0.3rem;text-align: center;line-height: .5rem;}
		.addresscobt{width:100%;background: #fff;}
		.addressbtshow{width:100%;position:absolute;top:0px;left:0;display: none;float:left;}
		.pictureadd{width:100%;display: block;overflow: auto;}
		.pictureaddcon{width: 31%;float:left;border:1px solid #999;}
		.pictureposi{position: relative;}
		.writeradd{width:100%;margin-top: 10px;overflow: auto;}
		.pictureposidiv{width: 100%;height:;}
		.pictureintro{font-size: .25rem;color: #000;text-align: center;height:39px;line-height: 39px;}
		.peopleview{font-size: .2rem;color: #333;text-align: center;height:39px;line-height: 39px;}
		.writeradd {float:left;width:100%;margin-top:10px;}
		.writeraddcon{width:99%;overflow: auto;margin:0px 0px 10px 5px;}
		.writeraddcon a{font-size: .3rem;border:1px #999 solid;float:left;width:31%;height:0.8rem;color:#000;text-align: center;line-height: 0.8rem}
		.contentfall{width: 100%;overflow:auto;}
		.contentfalla{width:100%;height:3.9rem;float:left;border:.01rem solid #444;margin-bottom: .5rem;}
		.contentfalldiv{position:relative;}
		.fallpicture{width:100%;height:2.8rem;}
		.contentfallawr{width:100%;height:1rem;font-size:.3rem;text-align:center;text-decoration: none;color:#000;}
	</style>
</head>
<body>
	<div class='header'>
		<div class='header_c logodiv'>
			<span class='logoimg'></span>
			<span class='addressdiv'></span>
		</div>
		<div class='header_c'>
			<span>
				<input type='text' name='search_input' class='search_input'>
			</span>
		</div>
		<div class='header_c navigatediv'>
			<span class='navigatedivspan'>导航</span>
			<!-- <span></span> -->
		</div>

		<div class="swiper-container">
	        <div class="swiper-wrapper">
	            <div class="swiper-slide">
	                <a href="index.php/Home/Index/viewdetail?picture={$result['data'][0].photourl}">
	                    <img style='width:100%;height:2.5rem;' src="{$result['data'][0].photourl}" alt="{$result['data'][0].sportitem}">
	                </a>
	            </div>
	            <volist name="restcell" id="kwlist">
		            <div class="swiper-slide">
		                <a href="index.php/Home/Index/viewdetail?picture={$kwlist.photourl}">
		                    <img style='width:100%;height:2.5rem;' src="{$kwlist.photourl}" alt="{$kwlist.sportitem}">
		                </a>
		            </div>
	            </volist>
	        </div>
	        <div class="swiper-pagination"></div>
	    </div>

	    <div class='menu_panel_mobel'>
	    	<div class='menupanel_first'><a class='menupanelw' href="">首页</a></div>
	    	<volist name='goodinfolist' id='goodinfolist'>
	    		<div class='menupanel'><a class='menupanelw' href="">{$goodinfolist['goodname']}</a></div>
	    	</volist>
	    	
	    </div>
	    
	    <div class='addressshow'>
	    	<div class='addressintro' style=''>
	    		<!-- <h1 class='addressintro'> -->
	    			-&nbsp;目的地推荐&nbsp;-
	    		<!-- </h1> -->
	    	</div>
	    	<div class='addresscobt'>
	    		<div classs='accresscon'>
		    		<div class='addressbtn'>国内</div>
		    		<div class='addressbtn'>国外</div>
		    		<div class='addressbtn'>热门</div>
		    	</div>
	    	</div>
	    	<div style='width:100%;' class='picturediv'>
		    	<div style='position:relative;'>
		    		<div class='addressbtshow'>
			    		<div class='pictureadd'>
			    			<div class='pictureaddcon'>
			    				<!-- <div class='pictureposidiv'> -->
			    					<a class='pictureposi' href="">
				    					<img style='width:100%;height:1.8rem;' src="https://ps.ssl.qhimg.com/sdmt/167_135_100/t01d19366b4afb20cdf.jpg">
				    				</a>
			    				<!-- </div> -->
			    					<div class='pictureintro'>
			    						<!-- <p>三亚</p>
			    						<p class='peopleview'><span>10</span>万人游览</p> -->三亚
			    					</div>
			    					
			    					<div class='peopleview'><span>10</span>万人游览</div>
			    			</div>
			    			<div class='pictureaddcon' style='margin:0px 3.5%;'>
			    				<!-- <div class='pictureposidiv'> -->
			    					<a class='pictureposi' href="">
				    					<img style='width:100%;height:1.8rem;' src="https://ps.ssl.qhimg.com/sdmt/139_135_100/t013dc6c9308bcfa5bf.jpg">
				    					
				    				</a>
			    				<!-- </div> -->
			    					<div class='pictureintro'>
			    						<!-- <p>重庆</p>
			    						<p class='peopleview'><span>10</span>万人游览</p> -->重庆
			    					</div>
			    					<div class='peopleview'><span>10</span>万人游览</div>
			    			</div>
			    			<div class='pictureaddcon'>
			    				<!-- <div class='pictureposidiv'> -->
			    					<a class='pictureposi' href="">
				    					<img style='width:100%;height:1.8rem;' src="https://ps.ssl.qhimg.com/sdmt/186_135_100/t018efdd15731c5b588.jpg">
				    				</a>
			    				<!-- </div> -->
			    					<div class='pictureintro'>
			    						<!-- <p>重庆</p>
			    						<p class='peopleview'><span>10</span>万人游览</p> -->北京
			    					</div>
			    					
			    					<div class='peopleview'><span>10</span>万人游览</div>
			    			</div>
			    		</div>
			    		<div class='writeradd'>
			    			<div class='writeraddcon'>
			    				<a href="">青岛</a>
			    				<a href="" style='margin:0px 11px;'>汉中</a>
			    				<a href="">汉中</a>
			    			</div>
			    			<div class='writeraddcon'>
			    				<a href="">青岛</a>
			    				<a href="" style='margin:0px 11px;'>汉中</a>
			    				<a href="">汉中</a>
			    			</div>
			    			<div class='writeraddcon'>
			    				<a href="">青岛</a>
			    				<a href="" style='margin:0px 11px;'>汉中</a>
			    				<a href="">汉中</a>
			    			</div>
			    		</div>
			    	</div>
			    	<div class='addressbtshow'>
			    		<div class='pictureadd'>
			    			<div class='pictureaddcon'>
			    				<!-- <div class='pictureposidiv'> -->
			    					<a class='pictureposi' href="">
				    					<img style='width:100%;height:1.8rem;' src="https://p.ssl.qhimg.com/sdm/242_150_/t01e1cef67b55849cff.jpg">
				    				</a>
			    				<!-- </div> -->
			    					<div class='pictureintro'>
			    						<!-- <p>三亚</p>
			    						<p class='peopleview'><span>10</span>万人游览</p> -->纽约
			    					</div>
			    					
			    					<div class='peopleview'><span>10</span>万人游览</div>
			    			</div>
			    			<div class='pictureaddcon' style='margin:0px 3.5%;'>
			    				<!-- <div class='pictureposidiv'> -->
			    					<a class='pictureposi' href="">
				    					<img style='width:100%;height:1.8rem;' src="https://pic.qyer.com/album/user/2408/74/Q01VSh0DZEA/index/225x150">
				    					
				    				</a>
			    				<!-- </div> -->
			    					<div class='pictureintro'>
			    						<!-- <p>重庆</p>
			    						<p class='peopleview'><span>10</span>万人游览</p> -->伦敦
			    					</div>
			    					<div class='peopleview'><span>10</span>万人游览</div>
			    			</div>
			    			<div class='pictureaddcon'>
			    				<!-- <div class='pictureposidiv'> -->
			    					<a class='pictureposi' href="">
				    					<img style='width:100%;height:1.8rem;' src="https://p.ssl.qhimg.com/sdm/242_150_/t01bdc05755f75698ac.jpg">
				    				</a>
			    				<!-- </div> -->
			    					<div class='pictureintro'>
			    						<!-- <p>重庆</p>
			    						<p class='peopleview'><span>10</span>万人游览</p> -->巴黎
			    					</div>
			    					
			    					<div class='peopleview'><span>10</span>万人游览</div>
			    			</div>
			    		</div>
			    		<div class='writeradd'>
			    			<div class='writeraddcon'>
			    				<a href="">老挪</a>
			    				<a href="" style='margin:0px 11px;'>泰国</a>
			    				<a href="">马来西亚</a>
			    			</div>
			    		</div>
			    	</div>
			    	<div class='addressbtshow'>
			    		<div class='pictureadd'>
			    			<div class='pictureaddcon'>
			    				<!-- <div class='pictureposidiv'> -->
			    					<a class='pictureposi' href="">
				    					<img style='width:100%;height:1.8rem;' src="https://ps.ssl.qhimg.com/sdmt/167_135_100/t01d19366b4afb20cdf.jpg">
				    				</a>
			    				<!-- </div> -->
			    					<div class='pictureintro'>
			    						<!-- <p>三亚</p>
			    						<p class='peopleview'><span>10</span>万人游览</p> -->三亚
			    					</div>
			    					
			    					<div class='peopleview'><span>10</span>万人游览</div>
			    			</div>
			    			<div class='pictureaddcon' style='margin:0px 3.5%;'>
			    				<!-- <div class='pictureposidiv'> -->
			    					<a class='pictureposi' href="">
				    					<img style='width:100%;height:1.8rem;' src="https://ps.ssl.qhimg.com/sdmt/139_135_100/t013dc6c9308bcfa5bf.jpg">
				    					
				    				</a>
			    				<!-- </div> -->
			    					<div class='pictureintro'>
			    						<!-- <p>重庆</p>
			    						<p class='peopleview'><span>10</span>万人游览</p> -->芭提亚
			    					</div>
			    					<div class='peopleview'><span>10</span>万人游览</div>
			    			</div>
			    			<div class='pictureaddcon'>
			    				<!-- <div class='pictureposidiv'> -->
			    					<a class='pictureposi' href="">
				    					<img style='width:100%;height:1.8rem;' src="https://ps.ssl.qhimg.com/sdmt/186_135_100/t018efdd15731c5b588.jpg">
				    				</a>
			    				<!-- </div> -->
			    					<div class='pictureintro'>
			    						<!-- <p>重庆</p>
			    						<p class='peopleview'><span>10</span>万人游览</p> -->北京
			    					</div>
			    					
			    					<div class='peopleview'><span>10</span>万人游览</div>
			    			</div>
			    		</div>
			    		<div class='writeradd'>
			    			
			    			<div class='writeraddcon'>
			    				<a href="">青岛</a>
			    				<a href="" style='margin:0px 11px;'>汉中</a>
			    			</div>
			    		</div>
			    	</div>
		    	</div>
	    	</div>
	    </div>
	    <div class='contentfall'>
	    	<a class='contentfalla' href="">
	    		<div class='contentfalldiv'>
	    			<img class='fallpicture' src="https://ps.ssl.qhimg.com/sdmt/148_135_100/t011342a1fc1ceeb202.jpg">
	    		</div>
	    		<div class='contentfallawr'>华山一日游</div>
	    	</a>
	    	<a class='contentfalla' href="">
	    		<div class='contentfalldiv'>
	    			<img class='fallpicture' src="https://ps.ssl.qhimg.com/sdmt/247_135_100/t0133797821a93f73d3.gif">
	    		</div>
	    		<div class='contentfallawr'>兵马俑</div>
	    	</a>
	    	<a class='contentfalla' href="">
	    		<div class='contentfalldiv'>
	    			<img class='fallpicture' src="https://ps.ssl.qhimg.com/sdmt/163_135_100/t013978b608a7ab716e.jpg">
	    		</div>
	    		<div class='contentfallawr'>敦煌莫高窟</div>
	    	</a>
	    </div>
	</div>	
	<script src="Public/swiper/dist/js/swiper.min.js"></script>
	<script type="text/javascript">
		var swiper = new Swiper('.swiper-container', {
	       	pagination: '.swiper-pagination',
        	paginationClickable: true,
	     	loop: true

	    });


		$(function(){
			var address=returnCitySN['cname'];
			if(address.indexOf('省')!=-1){
				indexOfpro=address.indexOf('省');
				indexOfcity=address.indexOf('市');

				address=address.substr(indexOfpro+1,(indexOfcity-(indexOfpro+1)));
			}else{
				indexOfcity=address.indexOf('市');
				address=address.substr(0,indexOfcity);
			}
			$('.addressdiv').html(address);


			$(".swiper-pagination-bullet").css({"width":'35px','height':'8px'});

			$('.addressbtn').on('click',function(){
				$(this).css({'border-bottom':'.05rem solid #2DBB57'}).siblings().css({'border-bottom':'none'});
				var indexcss=$(this).index();
				$('.addressbtshow:eq('+indexcss+')').css({'display':'block'}).siblings('.addressbtshow').css({'display':'none'});
				$('.picturediv').css({'height':$('.addressbtshow:eq('+indexcss+')').height()});
			})
			// alert($('.accresscon').height());
			$('.addresscobt').css({'height':$('.addressbtn').height()});
			$('.addressbtn:eq(0)').css({'border-bottom':'.05rem solid #2DBB57'})
			$('.addressbtshow:eq(0)').css({'display':'block'});
			$('.picturediv').css({'height':$('.addressbtshow').height()});
			// $('.pictureadd').css({'height':$('.pictureaddcon').height()});
		})
	</script>
</body>
</html>